<!-- 政策新增 编辑 -->
<template>
    <el-dialog v-model="dialogFormVisible" :title="helpPoorForm.id ? '修改政策内容' : '新增政策'" width="48%">
        <el-form :model="helpPoorForm" :rules="rules" ref="helpPoorForms">
            <el-form-item prop="title" label="政策标题" :label-width="formLabelWidth">
                <el-input v-model="helpPoorForm.title" autocomplete="off" placeholder="请输入政策标题" />
            </el-form-item>
            <el-form-item prop="content" label="政策内容" :label-width="formLabelWidth">
                <!-- <el-input v-model="helpPoorForm.content" :rows="8" type="textarea" placeholder="请输入政策内容" /> -->
                <EditorComponent :content="helpPoorForm.content"></EditorComponent>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import EditorComponent from '../../../components/editor/index.vue'
import { onMounted, reactive, ref } from 'vue';
import $bus from '../../../bus'
import { operateHelpPoorData } from '../../../api/info/information/type';

let $emit = defineEmits(['operateHelpPoorInfo'])
defineProps(['paginationData'])
let helpPoorForms = ref()
let formLabelWidth = ref<String>('80px')
let dialogFormVisible = ref<Boolean>(false)

// 收集对话框中的数据
let helpPoorForm = reactive<operateHelpPoorData>({
    title: '',
    content: '',
    type: 1
})


onMounted(() => {
    $bus.on('showDialog', (obj: any) => {
        //  清空上一次文本框中的内容
        helpPoorForm.title = ''
        helpPoorForm.content = ''
        helpPoorForm.id = ''
        // 显示对话框
        dialogFormVisible.value = obj.isShow

        // 赋值
        if (obj.row) {
            Object.assign(helpPoorForm, obj.row)
        }

        helpPoorForms.value?.clearValidate('title')
        helpPoorForms.value?.clearValidate('content')
    })
    $bus.on('blur', (html: any) => {
        helpPoorForm.content = html

    })
})

// 表单校验
const rules = {
    title: [{ required: true, message: '政策标题不能为空', trigger: 'blur' }],
    content: [{ required: true, message: '政策内容不能为空', trigger: 'blur' }]
}

// 对话框确认按钮回调
const submit = async () => {
    await helpPoorForms.value.validate();
    // 表单校验通过
    $emit('operateHelpPoorInfo', helpPoorForm)
    // 关闭对话框
    dialogFormVisible.value = false
}

</script>

<style lang="scss" scoped>
.el-form {
    padding: 0 10px;
}
</style>